<template>
  <div class="box-card">
    <el-card class="">
      <div slot="header" class="clearfix">
        <h3 class="change_pass">修改密码</h3>
      </div>
      <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">
        <el-form-item label="手机号码" prop="tel">
          <el-input class="user_info_input"  type="tel" v-model="ruleForm2.tel" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="verCode">
          <div class="verCode_wrap">
            <el-input class="user_info_input"  type="text" v-model="ruleForm2.verCode" auto-complete="off"></el-input>
            <el-button v-if="canGet" :loading="isLoading1" type="primary" round @click="obtainVer(ruleForm2.tel)"><span v-if="secondTime.isLoad">{{secondTime.time}}秒后再次获取</span><span v-else>接收验证码</span> </el-button>
          </div>
        </el-form-item>
        <el-form-item label="新密码" prop="newPass">
          <el-input class="user_info_input"  type="password" v-model="ruleForm2.newPass" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input class="user_info_input"  type="password" v-model="ruleForm2.checkPass" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import md5 from 'md5'
export default {
  data(){
    var checkTel = (rule, value, callback)=>{
      let reg = /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/;
        if (!reg.test(value)) {
          callback(new Error('请输入正确的手机号'));
          this.canGet = false
        }else{
          this.canGet = true;
        }
        callback()
    }
    var validatePass1 = (rule, value, callback)=>{
      if (value === '') {
        callback(new Error('请输入新密码'))
      } else{
        if (this.ruleForm2.checkPass !== '') {
          this.$refs.ruleForm2.validateField('checkPass');
        }
        callback()
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.ruleForm2.newPass) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return{
      canGet:false,
      secondTime:{
        isLoad:false,
        time:60
      },
      isLoading1:false,
      ruleForm2: {
        tel: '',
        verCode:'',
        newPass: '',
        checkPass: '',
      },
      rules2: {
          tel: [
            {required: true, validator: checkTel, trigger: 'blur' }
          ],
          verCode:[
            {required: true, message: '请填写验证码', trigger: 'blur'}
          ],
          newPass:[
            {required: true, validator: validatePass1, trigger: 'blur'}
          ],
          checkPass: [
            {required: true, validator: validatePass2, trigger: 'blur' }
          ]
        },
    }
  },
  methods:{
    submitForm(formName){
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.GLOBAL.request({
            method:'post',
            baseURL:this.GLOBAL.API_ACCOUNT_RNTY_URL,
            url:'users/update_password',
            data:{
              mobile:this.ruleForm2.tel,
              sms_code:this.ruleForm2.verCode,
              password:md5(this.ruleForm2.checkPass)
            }
          }).then(({data:data})=>{
            if (data.status) {
              this.$message({
                type:'success',
                message:data.message
              })
              setTimeout(()=>window.location.href = this.GLOBAL.RNTY_BASE_URL,500)
            }else{
              this.$message({
                type:'error',
                message:data.message
              })
            }
          })
        }
      })
    },
    obtainVer(mobile){
      if (this.isLoading1||this.secondTime.isLoad) {
        return
      }
      //倒计时
      this.isLoading1 = true;
      this.secondTime.isLoad = true;
      let timer = setInterval(()=>{
        if (this.secondTime.time==0) {
          clearInterval(timer)
          this.secondTime.isLoad = false;
          this.secondTime.time = 60;
          this.isLoading1 = false;
        }
        this.secondTime.time--
      },1000)
      // 发送验证码
      this.GLOBAL.request({
        method:'post',
        baseURL:this.GLOBAL.API_ACCOUNT_RNTY_URL,
        url:'scode/send',
        data: {
          mobile,
        }
      }).then(({data:data})=>{
        this.isLoading1 = false;
        if(data.status){
            this.$message({
              type:'success',
              message:data.message
            })
          }else{
            this.$message({
              type:'error',
              message:data.message
            })
          }
      })
    },
  }
}
</script>
<style scoped>
.box-card{
  width:500px !important;
  margin:0 auto;
  padding-top:50px;
}
.verCode_wrap{
  display: flex;
  justify-content: flex-start;
}
</style>


